<template>
	<view class="video-page">
		<!-- 顶部导航 -->
		<view class="video-navbar">
			<scroll-view class="nav-scroll" scroll-x="true" show-scrollbar="false">
				<view class="nav-items">
					<view v-for="(nav, index) in navList" :key="index" class="nav-item"
						:class="{ active: currentNav === nav.key }" @click="switchNav(nav.key)">
						<text class="nav-text">{{ nav.name }}</text>
						<view class="nav-indicator" v-if="currentNav === nav.key"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 视频列表 -->
		<scroll-view class="video-list" scroll-y="true" :refresher-enabled="true"
			:refresher-triggered="refresherTriggered" @refresherrefresh="onRefresherRefresh"
			@scrolltolower="onReachBottom">
			<view class="video-container">
				<view v-for="video in videoList" :key="video.id" class="video-item">
					<!-- 视频播放器 -->
					<view class="video-player">
						<video :src="video.videoUrl" :poster="video.cover" class="video-element" :controls="false"
							:autoplay="currentVideo === video.id" @play="onVideoPlay(video.id)" @pause="onVideoPause"
							@ended="onVideoEnded"></video>
						<view class="video-controls" v-if="currentVideo !== video.id">
							<text class="play-icon" @click="playVideo(video.id)">▶</text>
						</view>
					</view>

					<!-- 视频信息 -->
					<view class="video-info">
						<view class="author-section">
							<image class="author-avatar" :src="video.author.avatar" mode="aspectFill"></image>
							<view class="author-details">
								<text class="author-name">{{ video.author.name }}</text>
								<text class="video-desc">{{ video.description }}</text>
							</view>
							<view class="follow-btn"
								:class="{ followed: video.author.isFollowed, animating: followAnimating === video.author.id }"
								@click="handleFollow(video.author.id)">
								<text>{{ video.author.isFollowed ? '已关注' : '+ 关注' }}</text>
							</view>
						</view>

						<!-- 互动操作 -->
						<view class="action-buttons">
							<view class="action-item" @click="handleLike(video.id)">
								<view class="action-icon"
									:class="{ liked: video.isLiked, animating: likeAnimating === video.id }">
									<text v-if="video.isLiked">❤️</text>
									<text v-else>🤍</text>
								</view>
								<text class="action-count">{{ video.likeCount }}</text>
							</view>

							<view class="action-item" @click="showCommentModal(video)">
								<text class="action-icon">💬</text>
								<text class="action-count">{{ video.commentCount }}</text>
							</view>

							<view class="action-item" @click="showShareModal(video)">
								<text class="action-icon">📤</text>
								<text class="action-count">{{ video.shareCount }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view class="load-more" v-if="isLoading">
					<text class="load-more-text">加载中...</text>
				</view>
				<view class="no-more" v-if="!hasMore && videoList.length > 0">
					<text class="no-more-text">没有更多视频了</text>
				</view>
			</view>
		</scroll-view>

		<!-- 评论弹窗 -->
		<view class="modal-overlay" v-if="showComment" @click="hideCommentModal">
			<view class="comment-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">评论 {{ currentVideoComment?.commentCount || 0 }}</text>
					<text class="modal-close" @click="hideCommentModal">×</text>
				</view>
				<scroll-view class="comment-list" scroll-y="true">
					<view v-for="comment in commentList" :key="comment.id" class="comment-item">
						<image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
						<view class="comment-content">
							<view class="comment-header">
								<text class="comment-author">{{ comment.author }}</text>
								<text class="comment-time">{{ comment.time }}</text>
							</view>
							<text class="comment-text">{{ comment.content }}</text>
							<view class="comment-actions">
								<view class="comment-action" @click="handleLikeComment(comment.id)">
									<text class="action-icon">{{ comment.isLiked ? '❤️' : '🤍' }}</text>
									<text class="action-text">{{ comment.likeCount }}</text>
								</view>
								<view class="comment-action" @click="handleReply(comment)">
									<text class="action-icon">↩️</text>
									<text class="action-text">回复</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="comment-input-section">
					<view class="input-container">
						<input class="comment-input" :placeholder="replyPlaceholder" v-model="commentText"
							@confirm="submitComment" />
						<text class="send-btn" @click="submitComment">发送</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<view class="modal-overlay" v-if="showShare" @click="hideShareModal">
			<view class="share-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">分享到</text>
					<text class="modal-close" @click="hideShareModal">×</text>
				</view>
				<view class="share-platforms">
					<view class="platform-item" @click="shareToWechat">
						<view class="platform-icon wechat">微</view>
						<text class="platform-name">微信好友</text>
					</view>
					<view class="platform-item" @click="shareToMoment">
						<view class="platform-icon moment">朋</view>
						<text class="platform-name">朋友圈</text>
					</view>
					<view class="platform-item" @click="shareToQQ">
						<view class="platform-icon qq">Q</view>
						<text class="platform-name">QQ好友</text>
					</view>
					<view class="platform-item" @click="copyLink">
						<view class="platform-icon link">链</view>
						<text class="platform-name">复制链接</text>
					</view>
				</view>
				<view class="share-actions">
					<button class="cancel-btn" @click="hideShareModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 模拟云端API
	const mockApi = {
		getVideoList: (category, page = 1, pageSize = 10) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					const videos = [];
					const totalItems = 25;
					const startIndex = (page - 1) * pageSize;
					const endIndex = Math.min(startIndex + pageSize, totalItems);

					for (let i = startIndex; i < endIndex; i++) {
						const video = {
							id: `video-${category}-${page}-${i}`,
							videoUrl: `/static/videos/video${(i % 5) + 1}.mp4`,
							cover: `/static/video-covers/cover${(i % 5) + 1}.jpg`,
							description: `这是一个精彩的短视频内容 #${i + 1}，分享生活中的美好瞬间`,
							likeCount: Math.floor(Math.random() * 1000) + 100,
							commentCount: Math.floor(Math.random() * 200) + 20,
							shareCount: Math.floor(Math.random() * 100) + 10,
							isLiked: Math.random() > 0.7,
							author: {
								id: `author-${i}`,
								name: ['旅行达人', '美食博主', '健身教练', '宠物专家', '音乐人'][i % 5],
								avatar: `/static/authors/author${(i % 5) + 1}.png`,
								isFollowed: Math.random() > 0.8
							}
						};
						videos.push(video);
					}

					resolve({
						code: 200,
						data: {
							list: videos,
							hasMore: endIndex < totalItems
						}
					});
				}, 1000);
			});
		},

		getComments: (videoId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					const comments = [{
							id: 1,
							author: "网友小明",
							avatar: "/static/users/user1.png",
							content: "这个视频太棒了！内容很有意义！",
							time: "2小时前",
							likeCount: 24,
							isLiked: false
						},
						{
							id: 2,
							author: "视频爱好者",
							avatar: "/static/users/user2.png",
							content: "作者拍得真好，期待更多作品！",
							time: "3小时前",
							likeCount: 18,
							isLiked: true
						}
					];
					resolve({
						code: 200,
						data: comments
					});
				}, 500);
			});
		},

		// 跳转到视频详情页
		goToVideoDetail(video) {
			// 停止当前播放的视频
			this.stopCurrentVideo();

			// 跳转到视频详情页
			uni.navigateTo({
				url: `/pages/video-detail/video-detail?videoId=${video.id}`
			});
		},

		submitComment: (videoId, content, replyTo = null) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					const newComment = {
						id: Date.now(),
						author: "当前用户",
						avatar: "/static/current-user.png",
						content: content,
						time: "刚刚",
						likeCount: 0,
						isLiked: false
					};
					resolve({
						code: 200,
						data: newComment,
						message: "评论成功"
					});
				}, 300);
			});
		},

		likeComment: (commentId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "点赞成功"
					});
				}, 200);
			});
		},

		unlikeComment: (commentId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "取消点赞成功"
					});
				}, 200);
			});
		},

		followUser: (userId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: '关注成功'
					});
				}, 300);
			});
		},

		unfollowUser: (userId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: '取消关注成功'
					});
				}, 300);
			});
		},

		likeVideo: (videoId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: '点赞成功'
					});
				}, 300);
			});
		},

		unlikeVideo: (videoId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: '取消点赞成功'
					});
				}, 300);
			});
		}
	};

	export default {
		name: "VideoPage",
		data() {
			return {
				navList: [{
						key: 'recommend',
						name: '推荐'
					},
					{
						key: 'follow',
						name: '关注'
					},
					{
						key: 'hot',
						name: '热门'
					},
					{
						key: 'food',
						name: '美食'
					},
					{
						key: 'travel',
						name: '旅行'
					},
					{
						key: 'sports',
						name: '运动'
					},
					{
						key: 'music',
						name: '音乐'
					},
					{
						key: 'pet',
						name: '宠物'
					}
				],
				currentNav: 'recommend',
				videoList: [],
				currentVideo: null,
				isLoading: false,
				hasMore: true,
				currentPage: 1,
				refresherTriggered: false,
				likeAnimating: null,
				followAnimating: null,

				showComment: false,
				currentVideoComment: null,
				commentList: [],
				commentText: '',
				replyingTo: null,

				showShare: false,
				currentVideoShare: null
			}
		},
		computed: {
			replyPlaceholder() {
				return this.replyingTo ? `回复 ${this.replyingTo.author}: ` : '写下你的评论...';
			}
		},
		onLoad() {
			this.loadVideos();
		},
		onUnload() {
			this.stopAllVideos();
		},
		onHide() {
			this.stopCurrentVideo();
		},
		methods: {
			switchNav(navKey) {
				this.currentNav = navKey;
				this.currentPage = 1;
				this.videoList = [];
				this.stopCurrentVideo();
				this.loadVideos(true);
			},

			async loadVideos(isRefresh = false) {
				if (this.isLoading) return;

				try {
					this.isLoading = true;
					const result = await mockApi.getVideoList(this.currentNav, this.currentPage);

					if (result.code === 200) {
						if (isRefresh || this.currentPage === 1) {
							this.videoList = result.data.list;
						} else {
							this.videoList = [...this.videoList, ...result.data.list];
						}
						this.hasMore = result.data.hasMore;
					}
				} catch (error) {
					console.error('加载视频失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					});
				} finally {
					this.isLoading = false;
					this.refresherTriggered = false;
				}
			},

			playVideo(videoId) {
				this.stopCurrentVideo();
				this.currentVideo = videoId;
			},

			stopCurrentVideo() {
				this.currentVideo = null;
			},

			stopAllVideos() {
				this.currentVideo = null;
			},

			onVideoPlay(videoId) {
				this.currentVideo = videoId;
			},

			async handleFollow(userId) {
				try {
					const video = this.videoList.find(v => v.author.id === userId);
					if (!video) return;

					this.followAnimating = userId;
					setTimeout(() => {
						this.followAnimating = null;
					}, 600);

					if (video.author.isFollowed) {
						await mockApi.unfollowUser(userId);
						video.author.isFollowed = false;
						uni.showToast({
							title: '取消关注',
							icon: 'success'
						});
					} else {
						await mockApi.followUser(userId);
						video.author.isFollowed = true;
						uni.showToast({
							title: '关注成功',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('关注操作失败:', error);
					uni.showToast({
						title: '操作失败',
						icon: 'error'
					});
				}
			},

			async handleLike(videoId) {
				try {
					const video = this.videoList.find(v => v.id === videoId);
					if (!video) return;

					this.likeAnimating = videoId;
					setTimeout(() => {
						this.likeAnimating = null;
					}, 600);

					if (video.isLiked) {
						await mockApi.unlikeVideo(videoId);
						video.isLiked = false;
						video.likeCount--;
					} else {
						await mockApi.likeVideo(videoId);
						video.isLiked = true;
						video.likeCount++;
					}
				} catch (error) {
					console.error('点赞操作失败:', error);
				}
			},

			async showCommentModal(video) {
				this.currentVideoComment = video;
				this.showComment = true;
				this.commentText = '';
				this.replyingTo = null;

				try {
					const result = await mockApi.getComments(video.id);
					if (result.code === 200) {
						this.commentList = result.data;
					}
				} catch (error) {
					console.error('加载评论失败:', error);
				}
			},

			hideCommentModal() {
				this.showComment = false;
				this.currentVideoComment = null;
				this.commentList = [];
				this.replyingTo = null;
			},

			async submitComment() {
				if (!this.commentText.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return;
				}

				try {
					const result = await mockApi.submitComment(this.currentVideoComment.id, this.commentText);
					if (result.code === 200) {
						this.commentList.unshift(result.data);
						this.currentVideoComment.commentCount++;
						this.commentText = '';
						this.replyingTo = null;
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('评论失败:', error);
					uni.showToast({
						title: '评论失败',
						icon: 'error'
					});
				}
			},

			handleReply(comment) {
				this.replyingTo = comment;
				this.commentText = `回复 ${comment.author}: `;
			},

			async handleLikeComment(commentId) {
				try {
					const comment = this.commentList.find(c => c.id === commentId);
					if (!comment) return;

					if (comment.isLiked) {
						await mockApi.unlikeComment(commentId);
						comment.isLiked = false;
						comment.likeCount--;
					} else {
						await mockApi.likeComment(commentId);
						comment.isLiked = true;
						comment.likeCount++;
					}
				} catch (error) {
					console.error('点赞评论失败:', error);
				}
			},

			showShareModal(video) {
				this.currentVideoShare = video;
				this.showShare = true;
			},

			hideShareModal() {
				this.showShare = false;
				this.currentVideoShare = null;
			},

			shareToWechat() {
				this.performShare('WXSceneSession');
			},

			shareToMoment() {
				this.performShare('WXSceneTimeline');
			},

			shareToQQ() {
				uni.share({
					provider: "qq",
					scene: "session",
					type: 0,
					href: `https://example.com/video/${this.currentVideoShare.id}`,
					title: this.currentVideoShare.description,
					summary: `来自${this.currentVideoShare.author.name}的精彩视频`,
					success: () => {
						this.handleShareSuccess();
					},
					fail: () => {
						this.handleShareFail();
					}
				});
			},

			copyLink() {
				const link = `https://example.com/video/${this.currentVideoShare.id}`;
				uni.setClipboardData({
					data: link,
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						});
						this.currentVideoShare.shareCount++;
						this.hideShareModal();
					}
				});
			},

			performShare(scene) {
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: `https://example.com/video/${this.currentVideoShare.id}`,
					title: this.currentVideoShare.description,
					summary: `来自${this.currentVideoShare.author.name}的精彩视频`,
					imageUrl: this.currentVideoShare.cover,
					success: () => {
						this.handleShareSuccess();
					},
					fail: () => {
						this.handleShareFail();
					}
				});
			},

			handleShareSuccess() {
				this.currentVideoShare.shareCount++;
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				});
				this.hideShareModal();
			},

			handleShareFail() {
				uni.showToast({
					title: '分享失败',
					icon: 'error'
				});
			},

			onRefresherRefresh() {
				this.refresherTriggered = true;
				this.currentPage = 1;
				this.loadVideos(true);
			},

			onReachBottom() {
				if (this.isLoading || !this.hasMore) return;
				this.currentPage++;
				this.loadVideos();
			}
		}
	}
</script>

<style scoped>
	.video-page {
		background: #f5f5f5;
		min-height: 100vh;
	}

	/* 通用样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 9999;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.modal-close {
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 导航栏样式 */
	.video-navbar {
		background: linear-gradient(135deg, #007AFF, #00C6FF);
		padding: 20rpx 32rpx;
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.nav-scroll {
		flex: 1;
		white-space: nowrap;
		height: 80rpx;
	}

	.nav-items {
		display: inline-flex;
		align-items: center;
		gap: 40rpx;
		height: 100%;
	}

	.nav-item {
		position: relative;
		padding: 16rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.nav-text {
		font-size: 32rpx;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
	}

	.nav-item.active .nav-text {
		color: #ffffff;
		font-weight: 700;
		font-size: 36rpx;
	}

	.nav-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background: #ffffff;
		border-radius: 2rpx;
	}

	/* 视频列表和项目样式 */
	.video-list {
		height: calc(100vh - 120rpx);
	}

	.video-container {
		padding: 0;
	}

	.video-item {
		background: white;
		margin-bottom: 16rpx;
		overflow: hidden;
	}

	.video-player {
		position: relative;
		width: 100%;
		height: 420rpx;
		background: #000;
	}

	.video-element {
		width: 100%;
		height: 100%;
	}

	.video-controls {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
	}

	.play-icon {
		font-size: 80rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	/* 视频信息样式 */
	.video-info {
		padding: 24rpx 32rpx;
	}

	.author-section {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.author-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.author-details {
		flex: 1;
		margin-right: 20rpx;
	}

	.author-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		display: block;
		margin-bottom: 8rpx;
	}

	.video-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 按钮和操作样式 */
	.follow-btn {
		padding: 12rpx 24rpx;
		border: 2rpx solid #007AFF;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #007AFF;
		background: white;
		transition: all 0.3s;
		flex-shrink: 0;
	}

	.follow-btn.followed {
		background: #f0f0f0;
		color: #666;
		border-color: #f0f0f0;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 40rpx;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		font-size: 44rpx;
		margin-bottom: 8rpx;
		transition: all 0.3s;
	}

	.action-icon.liked {
		color: #ff0000;
	}

	.action-count {
		font-size: 22rpx;
		color: #666;
	}

	/* 动画效果 */
	.follow-btn.animating,
	.action-icon.animating {
		animation: scaleBounce 0.6s ease;
	}

	@keyframes scaleBounce {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}
	}

	.action-icon.animating {
		animation: likeBounce 0.6s ease;
	}

	@keyframes likeBounce {

		0%,
		100% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.3);
		}

		50% {
			transform: scale(0.9);
		}

		75% {
			transform: scale(1.1);
		}
	}

	/* 加载状态 */
	.load-more,
	.no-more {
		text-align: center;
		padding: 40rpx;
		color: #6c757d;
		font-size: 26rpx;
	}

	/* 弹窗样式 */
	.comment-modal {
		background: white;
		width: 100%;
		height: 70vh;
		border-radius: 24rpx 24rpx 0 0;
		display: flex;
		flex-direction: column;
	}

	.share-modal {
		background: white;
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
	}

	/* 评论相关样式 */
	.comment-list {
		flex: 1;
		padding: 0 32rpx;
	}

	.comment-item {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.comment-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.comment-author {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		margin-right: 20rpx;
	}

	.comment-time {
		font-size: 22rpx;
		color: #999;
	}

	.comment-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.comment-actions {
		display: flex;
		align-items: center;
	}

	.comment-action {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.comment-action .action-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}

	.comment-action .action-text {
		font-size: 22rpx;
		color: #666;
	}

	.comment-input-section {
		padding: 20rpx 32rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.input-container {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 30rpx;
		padding: 16rpx 24rpx;
	}

	.comment-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.send-btn {
		color: #007AFF;
		font-size: 28rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	/* 分享平台样式 */
	.share-platforms {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 32rpx;
	}

	.platform-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.platform-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: white;
		margin-bottom: 16rpx;
	}

	.platform-icon.wechat {
		background: #07C160;
	}

	.platform-icon.moment {
		background: #7CD300;
	}

	.platform-icon.qq {
		background: #12B7F5;
	}

	.platform-icon.link {
		background: #007AFF;
	}

	.platform-name {
		font-size: 24rpx;
		color: #666;
	}

	.share-actions {
		padding: 0 32rpx 32rpx;
	}

	.cancel-btn {
		width: 100%;
		background: #f8f9fa;
		color: #333;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
	}

	.cancel-btn::after {
		border: none;
	}

	/* 响应式设计 */
	@media (max-width: 768rpx) {

		.video-navbar,
		.modal-header,
		.comment-input-section,
		.share-actions {
			padding: 16rpx 24rpx;
		}

		.nav-items {
			gap: 32rpx;
		}

		.nav-text {
			font-size: 28rpx;
		}

		.video-info {
			padding: 20rpx 24rpx;
		}

		.author-avatar {
			width: 70rpx;
			height: 70rpx;
		}

		.author-name {
			font-size: 26rpx;
		}

		.video-desc {
			font-size: 24rpx;
		}

		.action-buttons {
			gap: 30rpx;
		}

		.action-icon {
			font-size: 40rpx;
		}

		.comment-modal {
			height: 60vh;
		}

		.comment-list {
			padding: 0 24rpx;
		}

		.share-platforms {
			padding: 32rpx 24rpx;
		}

		.platform-icon {
			width: 90rpx;
			height: 90rpx;
			font-size: 32rpx;
		}
	}
</style>